<template>
	<view class='content'>
		<view class="top_next flexs3">
			<view class="flexs1" @click="choosehangye">
				<view class="top_title">行业分类</view>
				<image v-if="!hangye" class="top_image" src="../../static/image/kqfx_ico_xl@2x.png" mode=""></image>
				<image v-else class="top_image" src="../../static/image/kqfx_ico_sl@2x.png" mode=""></image>
			</view>
			<view class="flexs1" @click="choosetime">
				<view class="top_title">不限</view>
				<image class="top_image" v-if="!timeshow" src="../../static/image/kqfx_ico_xl@2x.png" mode=""></image>
				<image class="top_image" v-else src="../../static/image/kqfx_ico_sl@2x.png" mode=""></image>
			</view>
			<view class="flexs1" @click="chooseNew">
				<view class="top_title">最新</view>
				<image v-if="!newStatus" class="top_image" src="../../static/image/kqfx_ico_xl@2x.png" mode=""></image>
				<image v-else class="top_image" src="../../static/image/kqfx_ico_sl@2x.png" mode=""></image>
			</view>
		</view>
		<!-- 行业分类 -->
		<view class='mask' v-if='hangye' @click='closemask'></view>
		<tab-select v-if='hangye' :checkedArrey='listitem' @tabselect='tabselect'></tab-select>

		<view class='mask' v-if='timeshow' @click='closemaskagain'></view>
		<view class="model" v-if='timeshow'>
			<sort-model @pricenewtime="pricenewtime" :dataList="ScoreList" :releaindex="releaindex"></sort-model>
		</view>
		
		<view class='mask' v-if='newStatus' @click='chapterclick'></view>
		<view class="model" v-if='newStatus'>
			<sort-model @pricenewtime="chooseNews" :dataList="newsList" :releaindex="choosenew"></sort-model>
		</view>

		<view class="list_box">
			<view class="none_msg" v-if="InfoList.length==0">
				<image src="../../static/image/kqfx_img_k@2x.png" mode=""></image>
				<view class="none_title">暂无信息</view>
			</view>
			<view class="list_item" v-for="(item,index) in InfoList" :key="index" v-else>
				<view class="list_item_top" @click="goDet(item.id)">
					<view class="list_top_l">
						<image :src="picture.getImgUrl(item.image)" mode=""></image>
						<view class="list_top_title">{{item.name}}</view>
					</view>
					<view class="list_top_r">
						<view class="list_top_fens">{{item.score}}</view>
						<view class="list_top_plnum">({{item.evaluate_num}}人评价)</view>
					</view>
				</view>
				<view class="list_item_con" @click="goDet(item.id)" v-html="item.analysis">
					<!-- {{item.analysis}} -->
				</view>
				<view class="list_btm_box">
					<view class="list_btm_item">
						<image src="../../static/image/jyjq_ico_sc@2x.png" mode=""></image>{{item.collect_num}}
					</view>
					<view class="list_btm_item">
						<image src="../../static/image/sy_ico_dz@2x.png" mode=""></image>{{item.like_num}}
					</view>
					<view class="list_btm_item">
						<image src="../../static/image/zpzx_ico_yd@2x.png" mode=""></image>{{item.watch_num}}
					</view>
					<view class="list_btm_item">
						<image src="../../static/image/kqfx_ico_llrc@2x.png" mode=""></image>{{item.watch_person_num}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		Companyindex,
		Classification
	} from '@/api/data.js'
	import TabSelect from '@/components/TabSelect.vue'
	import SortModel from '@/components/SortModel.vue'
	export default {
		components: {
			TabSelect,
			SortModel
		},
		data() {
			return {
				hangye: false,
				timeshow: false,
				newStatus: false,
				choose_left: 0,
				choosenew: 1,
				listitem: [],
				InfoList: [],
				ScoreList: [{
						id: 0,
						name: '不限'
					}, {
						id: 1,
						name: '一分'
					}, {
						id: 2,
						name: '二分'
					},
					{
						id: 3,
						name: '三分'
					}, {
						id: 4,
						name: '四分'
					}, {
						id: 5,
						name: '五分'
					}
				],
				releaindex: 0,
				newsList:[
					{
						id:1,
						name:'最新'
					},
					{
						id:2,
						name:'浏览量'
					},
					{
						id:3,
						name:'课程量'
					}
				],
				choosenew:1,
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getList()
		},
		methods: {
			choosetime() { //时间显示
				this.timeshow = !this.timeshow
				this.hangye = false
				this.newStatus = false
			},
			choosehangye() { //行业显示
				this.hangye = !this.hangye
				this.timeshow = false
				this.newStatus = false
			},
			chooseNew() {
				this.newStatus = !this.newStatus
				this.timeshow = false
				this.hangye = false
			},
			closemask() { //点击模态框也关闭弹框
				this.hangye = false
			},
			tabselect(list, index) {
				this.listitem = index
				this.getList(list)
				this.hangye = false
			},
			getList(list) {
				var obj = {
					class_id: list || [],
					score: this.choose_left,
					order: this.choosenew
				};
				Companyindex(obj).then(res => {
					if (res.code == 1) {
						this.InfoList = res.data
					}
				});
			},
			goDet(id) {
				uni.navigateTo({
					url: 'Famous_Det?id=' + id
				})
			},
			pricenewtime(id) {
				this.releaindex = id.id
				setTimeout(() => {
					this.timeshow = false
					// this.shouwzhe = false
				}, 500)
				this.choose_left = id.id
				this.getList()
			},
			chooseNews(id) { //行业左边
				this.choosenew= id.id
				setTimeout(() => {
					this.newStatus=false
					// this.shouwzhe=false
				}, 500)
				this.getList()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	/* 列表 */
	.list_box {
		width: 100%;
		height: auto;
		overflow-y: auto;
		margin-top: 70rpx;
	}

	.list_item {
		width: 100%;
		height: auto;
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.list_item_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.list_top_l {
		width: auto;
		display: flex;
		align-items: flex-start;

	}

	.list_top_l image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 19rpx;
		background-color: #F5F5F5;
	}

	.list_top_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.list_top_r {
		text-align: center;
	}

	.list_top_fens {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3B30;
	}

	.list_top_plnum {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.list_item_con {
		width: 100%;
		height: auto;
		margin-top: 18rpx;
	}

	.list_btm_box {
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
	}

	.list_btm_item {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		align-items: center;
	}

	.list_btm_item image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	/* top */
	.top_next {
		width: 100%;
		line-height: 70rpx;
		font-size: 26rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 88rpx;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		z-index: 20;
	}

	.top_title {
		margin-right: 8rpx;
		font-size: 26rpx;
	}

	.top_kong {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.image_last {
		width: 163rpx;
		height: 177rpx;
		margin-bottom: 16rpx;
	}

	.last_text {
		color: #666666;
		font-size: 26rpx;
	}

	.kong_mt {
		margin-top: 120rpx;
	}

	.top_image {
		width: 16rpx;
		height: 10rpx;
	}

	/* model 行业分类 */
	.model {
		width: 100%;
		height: auto;
		color: #333333;
		font-size: 28rpx;
		position: absolute;
		top: 102rpx;
		z-index: 100;
	}

	.mask {
		position: fixed;
		top: 200rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 20;
	}


	/* cemter */
	.center {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.center_pay {
		font-size: 22rpx;
		color: #999999;
	}

	.cemter_last {
		font-size: 34rpx;
		color: #FF3B30;
		font-weight: bold;
	}

	.center_study {
		margin-top: 6rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.center_right {
		width: 475rpx;
		height: auto;
		border-bottom: solid 1rpx #e5e5e5;
		padding: 20rpx 0;
	}

	.top_titles {
		height: 70;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}

	.center_image {
		width: 196rpx;
		height: 130rpx;
		border-radius: 10rpx;

	}

	.center_maozi {
		width: 28rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}

	.fwt {
		font-size: 24rpx;
	}

	/* shijian */
	.time_font {
		font-weight: bold;
	}

	.time_center {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		font-size: 28rpx;
	}

	/* 暂无消息 */
	.none_msg {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 300rpx;
	}

	.none_msg image {
		width: 354rpx;
		height: 253rpx;
	}

	.none_title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 40rpx;
	}
</style>

.list_top_r{
text-align: center;
}
.list_top_fens{
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: # FF3B30;
}
.list_top_plnum {
font - size: 24 rpx;
font - family: PingFang SC;
font - weight: 500;
color: #999999;
}
.list_item_con{
width: 100%;
height: auto;
margin-top: 18rpx;
}
.list_btm_box{
width: 100%;
padding:0 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.list_btm_item{
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: # 666666;
align - items: center;
}
.list_btm_item image {
width: 28 rpx;
height: 26 rpx;
margin - right: 10 rpx;
}
/* top */
.top_next {
width: 100 % ;
line - height: 70 rpx;
font - size: 26 rpx;
background - color: #FFFFFF;
position: fixed;
top: 88 rpx;
/* #ifdef APP-PLUS */
top: 0;
/* #endif */
z - index: 20;
}

.top_title {
margin - right: 8 rpx;
font - size: 26 rpx;
}

.top_kong {
width: 100 % ;
height: 20 rpx;
background - color: #F5F5F5;
}

.image_last {
width: 163 rpx;
height: 177 rpx;
margin - bottom: 16 rpx;
}

.last_text {
color: #666666;
font-size: 26rpx;
}

.kong_mt {
margin-top: 120rpx;
}
.top_image {
width: 16rpx;
height: 10rpx;
}
/* model 行业分类 */
.model {
width: 100%;
height: auto;
color: # 333333;
font - size: 28 rpx;
position: absolute;
top: 102 rpx;
z - index: 100;
}

.mask {
position: fixed;
top: 200 rpx;
bottom: 0;
left: 0;
right: 0;
background - color: rgba(0, 0, 0, 0.4);
z - index: 20;
}

.model_border {
background - color: #FFFFFF;
}
.model_left_box {
display: flex;
justify - content: flex - start;
align - items: flex - start;
}

.model_left {
width: 200 rpx;
line - height: 100 rpx;
text - align: center;
background - color: #DDDDDD;
font - size: 28 rpx;
}

.model_right {
width: 550 rpx;
height: 500 rpx;
background - color: #FFFFFF;
overflow - y: auto;
}

.right_list {
width: 100 % ;
line - height: 100 rpx;
font - size: 28 rpx
}

.right_chexs image {
width: 26 rpx;
height: 18 rpx;
}

.right_box {
padding: 0 30 rpx;
}

.left_list {
position: relative;
}

.left_color {
width: 4 rpx;
height: 20 rpx;
background - color: #FFDD47;
position: absolute;
left: 0;
}

.bottom_bs {
width: 50 % ;
height: 88 rpx;
background - color: #FFFFFF;
font - size: 30 rpx;
}

.bottom_ps {
width: 50 % ;
height: 88 rpx;
background - color: #FFDD47;
font - size: 30 rpx;
}

/* cemter */
.center {
width: 100 % ;
height: auto;
background - color: #FFFFFF;
padding: 0 30 rpx;
}

.center_pay {
font - size: 22 rpx;
color: #999999;
}

.cemter_last {
font-size: 34rpx;
color: # FF3B30;
font - weight: bold;
}

.center_study {
margin - top: 6 rpx;
color: #666666;
font-size: 24rpx;
}

.center_right {
width: 475rpx;
height: auto;
border-bottom: solid 1rpx # e5e5e5;
padding: 20 rpx 0;
}

.top_titles {
height: 70;
color: #333333;
font-size: 28rpx;
font-weight: bold;
}

.center_image {
width: 196rpx;
height: 130rpx;
border-radius: 10rpx;

}

.center_maozi {
width: 28rpx;
height: 26rpx;
margin-right: 6rpx;
}

.fwt {
font-size: 24rpx;
}
/* shijian */
.time_font {
font-weight: bold;
}

.time_center {
width: 100%;
height: auto;
background-color: # FFFFFF;
font - size: 28 rpx;
}

/* 暂无消息 */
.none_msg {
width: 100 % ;
height: auto;
display: flex;
justify - content: center;
align - items: center;
flex - direction: column;
margin - top: 300 rpx;
}

.none_msg image {
width: 354 rpx;
height: 253 rpx;
}

.none_title {
font - size: 26 rpx;
font - family: PingFang SC;
font - weight: 500;
color: #666666;
margin-top: 40rpx;
}

</style>
